﻿@{
    ViewData["Title"] = "添加仓位定义信息";
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"]</title>
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f9f9f9;
        }

        .form-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .layui-form-label {
            width: 120px;
        }

        .layui-input-block {
            margin-left: 150px;
        }

        .layui-form-item {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>

    <div class="form-container">
        <form class="layui-form" lay-filter="addForm">
            <!-- 仓库 -->
            <div class="layui-form-item">
                <label class="layui-form-label">仓库：</label>
                <div class="layui-input-block">
                    <input type="number" name="repositoryId" lay-verify="required|number" placeholder="请输入仓库" class="layui-input">
                </div>
            </div>

            <!-- 库位类型 -->
            <div class="layui-form-item">
                <label class="layui-form-label">库位类型：</label>
                <div class="layui-input-block">
                    <input type="number" name="theLocationType" lay-verify="required|number" placeholder="请输入库位类型" class="layui-input">
                </div>
            </div>

            <!-- 库位编码 -->
            <div class="layui-form-item">
                <label class="layui-form-label">库位编码：</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <input type="text" name="theLocationCode" lay-verify="required" placeholder="请输入车间编码" autocomplete="off" style="width:300px" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <input type="checkbox" lay-skin="switch" lay-filter="switchTest">自动生成
                    </div>
                  
                  
                </div>
            </div>

            <!-- 所属客户 -->
            <div class="layui-form-item">
                <label class="layui-form-label">所属客户：</label>
                <div class="layui-input-block">
                    @* 动态绑定货主下拉框 *@
                    <select name="customer" lay-verify="required">
                        <option value="">请选择货主</option>
                    </select>
                </div>
            </div>

            <!-- 库位属性 -->
            <div class="layui-form-item">
                <label class="layui-form-label">库位属性：</label>
                <div class="layui-input-block">
                    <input type="number" name="binLocationAttributes" lay-verify="required|number" placeholder="请输入库位属性" class="layui-input">
                </div>
            </div>

            <!-- 产品属性 -->
            <div class="layui-form-item">
                <label class="layui-form-label">产品属性：</label>
                <div class="layui-input-block">
                    <input type="number" name="productAttributes" lay-verify="required|number" placeholder="请输入产品属性" class="layui-input">
                </div>
            </div>

            <!-- 停用 -->
            <div class="layui-form-item">
                <label class="layui-form-label">停用：</label>
                <div class="layui-input-block">
                    @*   <input type="text" name="deactivated" lay-verify="required" placeholder="请输入停用" class="layui-input"> *@
                    <input type="checkbox" name="Deactivated" lay-skin="switch"> 停用
                </div>
            </div>

            <!-- 取货次序 -->
            <div class="layui-form-item">
                <label class="layui-form-label">取货次序：</label>
                <div class="layui-input-block">
                    <input type="number" name="pickupOrder" lay-verify="required|number" placeholder="请输入取货次序" class="layui-input">
                </div>
            </div>

            <!-- 最大体积 -->
            <div class="layui-form-item">
                <label class="layui-form-label">最大体积：</label>
                <div class="layui-input-block">
                    <input type="number" name="maxVolume" lay-verify="required|number" placeholder="请输入最大体积" class="layui-input">
                </div>
            </div>

            <!-- 最大重量 -->
            <div class="layui-form-item">
                <label class="layui-form-label">最大重量：</label>
                <div class="layui-input-block">
                    <input type="number" name="maxWeight" lay-verify="required|number" placeholder="请输入最大重量" class="layui-input">
                </div>
            </div>

            <!-- 上架次序 -->
            <div class="layui-form-item">
                <label class="layui-form-label">上架次序：</label>
                <div class="layui-input-block">
                    <input type="number" name="listingOrder" lay-verify="required|number" placeholder="请输入上架次序" class="layui-input">
                </div>
            </div>

            <!-- 宽度 -->
            <div class="layui-form-item">
                <label class="layui-form-label">宽度：</label>
                <div class="layui-input-block">
                    <input type="number" name="wide" lay-verify="required|number" placeholder="请输入宽度" class="layui-input">
                </div>
            </div>

            <!-- 长度 -->
            <div class="layui-form-item">
                <label class="layui-form-label">长度：</label>
                <div class="layui-input-block">
                    <input type="number" name="long" lay-verify="required|number" placeholder="请输入长度" class="layui-input">
                </div>
            </div>

            <!-- 高度 -->
            <div class="layui-form-item">
                <label class="layui-form-label">高度：</label>
                <div class="layui-input-block">
                    <input type="number" name="high" lay-verify="required|number" placeholder="请输入高度" class="layui-input">
                </div>
            </div>

            <!-- 最大托盘 -->
            <div class="layui-form-item">
                <label class="layui-form-label">最大托盘：</label>
                <div class="layui-input-block">
                    <input type="text" name="largestPallets" lay-verify="required" placeholder="请输入最大托盘" class="layui-input">
                </div>
            </div>

            <!-- X 坐标 -->
            <div class="layui-form-item">
                <label class="layui-form-label">X 坐标：</label>
                <div class="layui-input-block">
                    <input type="number" name="xcoordinates" lay-verify="required|number" placeholder="请输入 X 坐标" class="layui-input">
                </div>
            </div>

            <!-- Y 坐标 -->
            <div class="layui-form-item">
                <label class="layui-form-label">Y 坐标：</label>
                <div class="layui-input-block">
                    <input type="number" name="ycoordinates" lay-verify="required|number" placeholder="请输入 Y 坐标" class="layui-input">
                </div>
            </div>

            <!-- Z 坐标 -->
            <div class="layui-form-item">
                <label class="layui-form-label">Z 坐标：</label>
                <div class="layui-input-block">
                    <input type="number" name="zcoordinates" lay-verify="required|number" placeholder="请输入 Z 坐标" class="layui-input">
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submitBtn">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;
              // 监听复选框变化，自动生成客户编码
            form.on('switch(switchTest)', function (data) {
                if (data.elem.checked) {
                    // 生成随机字母+数字的编码并设置到CustomerCode输入框中
                    var randomNum = Math.floor(Math.random() * 10) + '';
                    for (var i = 0; i < 2; i++) {
                        randomNum += Math.floor(Math.random() * 10);
                    }
                    randomNum = 'KW00' + randomNum;
                    $('input[name="theLocationCode"]').val(randomNum);

                }
                else {
                    $('input[name="theLocationCode"]').val('');
                }
            });



            // 提交表单
            form.on('submit(submitBtn)', function (data) {
                // 这里可以发起 AJAX 请求，将数据提交到后端
                console.log('提交的数据：', data.field);
                data.field.theLocationBarcode ="库位1",
                // data.field.largestPallets ="最大托盘为1000",
                data.field.remark="很好",
                data.field.elabelId="王明签",
                data.field.outboundPort="东方",
                data.field.locationGroup="一组",

                      // 处理停用状态
                data.field.Deactivated = data.field.Deactivated ? 1 : 0;
                 // 提交到后端接口
                $.ajax({
                    url: '/BinLocationDefinition/CreateBinLocationDefi', // 提交地址
                    type: 'post',
                    data: data.field,
                    dataType: 'json',
                    success: function (res) {
                        console.log('提交结果：', res);
                        if (res==1) {
                            //延时加载返回列表页面
                            setTimeout(function () {
                               returnList();
                            }, 500);
                            layer.msg('录入成功');

                        }
                        else if(res==-1){
                            layer.msg('库位编号已存在');
                        }
                        else {
                            layer.msg('录入失败');
                        }
                    }
                });
                return false; // 阻止表单默认提交
            });
        });

         // 延时加载返回列表页面
        function returnList() {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        }

          /// 动态绑定货主下拉框
         layui.use(['form'], function () {
            var form = layui.form;
           $(function () {
                    $.ajax({
                        url: '/ProductDetail/BindClientName', // 获取货主列表地址
                        type: 'get',
                        dataType: 'json',
                        success: function (res) {
                            if (Array.isArray(res)) { // 确保返回的是数组
                                var options = '<option value="">请选择货主</option>'; // 默认选项
                                $.each(res, function (i, item) {
                                    if (item.id && item.chineseName) { // 确保数据字段存在
                                        options += '<option value="' + item.id + '">' + item.chineseName + '</option>';
                                    }
                                });
                                $('select[name="customer"]').html(options); // 填充下拉框
                                form.render('select'); // 刷新选择框渲染
                            } else {
                                console.error('返回数据格式不正确');
                                layer.msg('获取货主列表失败，数据格式不正确', { icon: 2 });
                            }
                        },
                        error: function () {
                            console.error('获取货主列表失败');
                            layer.msg('获取货主列表失败，请稍后重试', { icon: 2 });
                        }
                    });
                });
            });



    </script>

</body>
</html>
